<template>
  <div class="articleWrap">
    <nuxt-link :to="`/post/details?id=${post.id}`">
      <el-row class="article">
        <!-- 图片列 -->
        <el-col class="pic" v-if="post.images.length > 0">
          <img :src="post.images[0]" alt="" />
        </el-col>
        <!-- 文章内容列 -->
        <el-col class="content">
          <!-- 标题 -->
          <el-row class="title">
            <h4>{{ post.title }}</h4>
          </el-row>
          <!-- 创建时间和阅读量 -->
          <el-row class="info">
            <span>{{ post.created_at }}</span>
            <span>阅读：{{ post.watch || 0 }}</span>
          </el-row>
        </el-col>
      </el-row>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  props: ["post"],
};
</script>

<style lang="less" scoped>
.articleWrap {
  width: 100%;
  .article {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    .pic {
      width: 100px;
      height: 80px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .content {
      width: 170px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        h4 {
          font-size: 16px;
          font-weight: 400;
        }
      }
      .info {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>